<%= render_component_tag tag_name,
  id: id,
  href: href,
  class: [
    "block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
    {
      "hover:text-lookbook-icon-button-stroke-hover": !disabled,
      "cursor-[not-allowed] opacity-50": disabled
    }
  ],
  disabled: disabled,
  aria: { label: tooltip } do %>
  <span x-ref="icon">
    <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, "x-bind:class": "{'animate-spin': _spinning}") if icon) %>
  </span>
  <% if tooltip %>
    <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
  <% end %>
  <%= content %>
<% end %>
